<template>
  <h3>vue-i18n</h3>
  <p>{{ $t('message.hello') }}</p>
  <button>{{ $t('message.submit') }}</button>
  <hr>
  <!-- npm i vue-i18n --save 用如下方法 -->
  <button @click="$i18n.locale='zh'">中文</button>
  <button @click="chlang('zh')">中文-chlang()</button>
  <button @click="$i18n.locale='en'">英文</button>
  <button @click="$i18n.locale='ja'">日文</button>

  <hr>
  <icon-support/>
  <icon-home></icon-home>
  <img alt="" src="./components/icons/home.svg">
  <el-icon>
    <Edit/>
  </el-icon>
  <el-button :loading="isLoading" type="success">加载数据</el-button>
  <el-button size="small" type="primary" @click="ok">加载完成</el-button>
  <hr>
  <h3>使用svg</h3>
  <p>1.安装组件 npm i vite-plugin-svg-icons fast-glob -D</p>
  <p>2.粘贴 src/icons/svg/*.svg图标</p>
  <p>3.修改vite.config.ts配置</p>
  <code>
    import {createSvgIconsPlugin} from 'vite-plugin-svg-icons'<br>
    import path from 'path'<br>
    createSvgIconsPlugin({<br>
    iconDirs: [path.resolve(process.cwd(), 'src/icons/svg')], //路径<br>
    symbolId: 'icon-[dir]-[name]'<br>
    }),<br>
  </code>
  <p>4.在main.ts中全局注册 import 'virtual:svg-icons-register' </p>
  <p>5.使用<br>
    <!--  fill无法修改图标颜色时，删掉svg文件下的fill属性-->
    <svg aria-hidden="true" class="icon">
      <use xlink:href="#icon-user"></use>
    </svg>

    <svg aria-hidden="true" class="icon">
      <use xlink:href="#icon-language"></use>
    </svg>

    <svg aria-hidden="true" class="icon">
      <use xlink:href="#icon-password"></use>
    </svg>
  </p>

  <hr>
  <svg-icon name="eye"/>
  <svg-icon color="orange" name="user"/>
  <svg-icon name="home"/>
  <svg-icon color="green" name="wechat"/>

</template>
<script lang="ts" setup>

import IconSupport from '@/components/icons/IconSupport.vue'
import IconHome from "@/components/icons/IconHome.vue";
import {ref} from 'vue'
//import i18n from '@/i18n'

//i18n.global.locale = 'zh'
const isLoading = ref(true)

const ok = () => {
  isLoading.value = false
}

import {useI18n} from "vue-i18n"

const i18n = useI18n()

function chlang(lan: string): void {
  i18n.locale.value = lan
}


</script>

<style lang="scss" scoped>
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>
